{% extends 'blog/base.html' %}

{% block title %}{{ year }}年{{ month|stringformat:"02d" }}月归档 - 我的博客{% endblock %}

{% block archives %}
<!-- 头部信息卡片化 -->
<article class="message is-primary">
    <div class="message-header">
        <p>归档月份</p>
        <div class="tags has-addons">
            <span class="tag is-white">共</span>
            <span class="tag is-primary">{{ page_obj.paginator.count }} 篇</span>
        </div>
    </div>
    <div class="message-body is-flex is-justify-content-center">
        <span class="icon-text">
            <span class="icon">
                <i class="fas fa-calendar-alt"></i>
            </span>
            <span class="title is-4">{{ year }}年{{ month|stringformat:"02d" }}月</span>
        </span>
    </div>
</article>
{% endblock %}

{% block content %}
<!-- 文章列表优化 -->
<div class="columns is-multiline">
    {% for post in page_obj %}
    <div class="column is-full">
        <div class="card mb-4">  <!-- 添加卡片式布局 -->
            <div class="card-content">
                <div class="media">
                    <div class="media-content">
                        <h2 class="title is-5">
                            <a href="{% url 'blog:post_detail' post.id %}"
                               class="has-text-dark">{{ post.title }}</a>
                        </h2>
                        <div class="tags are-small">  <!-- 添加标签式元信息 -->
                            <span class="tag is-light">
                                <span class="icon"><i class="fas fa-user"></i></span>
                                <span>{{ post.owner }}</span>
                            </span>
                            <span class="tag is-light">
                                <span class="icon"><i class="fas fa-clock"></i></span>
                                <span>{{ post.add_date|date:"Y-m-d" }}</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="content">  <!-- 优化摘要显示 -->
                    {{ post.desc|truncatechars:100 }}
                    <a href="{% url 'blog:post_detail' post.id %}" class="is-pulled-right">
                        <span class="icon"><i class="fas fa-arrow-right"></i></span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    {% empty %}
    <div class="column is-full">
        <div class="notification is-warning">本月暂无文章</div>
    </div>
    {% endfor %}
</div>

<!-- 分页控件美化 -->
{% if page_obj.paginator.num_pages > 1 %}
<nav class="pagination is-centered is-rounded" role="navigation">
    <ul class="pagination-list">
        {% if page_obj.has_previous %}
        <li>
            <a href="?page={{ page_obj.previous_page_number }}"
               class="pagination-previous">上一页</a>
        </li>
        {% endif %}

        <li>
            <span class="pagination-ellipsis">第 {{ page_obj.number }} 页 / 共 {{ page_obj.paginator.num_pages }} 页</span>
        </li>

        {% if page_obj.has_next %}
        <li>
            <a href="?page={{ page_obj.next_page_number }}"
               class="pagination-next">下一页</a>
        </li>
        {% endif %}
    </ul>
</nav>
{% endif %}
{% endblock %}